<template>
  <div class="safety-education-page">
    <!-- 紧急通告 -->
    <div class="emergency-alert">
      <el-icon class="alert-icon"><Warning /></el-icon>
      <span>全民反拐行动进行中！发现可疑情况请立即拨打 110 报警</span>
    </div>

    <!-- 主内容区 -->
    <div class="main-container">
      <!-- 左侧主内容 -->
      <div class="content-main">
        <!-- 视频模块 -->
        <div class="video-module">
          <div id="xgplayer-container" class="video-container"></div>
          <div class="video-info">
            <h2 class="video-title">{{ currentVideo.title }}</h2>
            <div class="video-meta">
              <span class="publish-date">{{ currentVideo.date }}</span>
              <span class="video-duration">{{ currentVideo.duration }}</span>
            </div>

            <!-- 关键预防要点 -->
            <div class="prevention-points">
              <h3 class="section-title"><el-icon><InfoFilled /></el-icon> 核心防拐要点</h3>
              <el-timeline>
                <el-timeline-item
                  v-for="(point, index) in preventionPoints"
                  :key="index"
                  :timestamp="point.title"
                  placement="top"
                >
                  <p>{{ point.content }}</p>
                  <div class="example" v-if="point.example">
                    <el-icon><WarningFilled /></el-icon> 典型案例：{{ point.example }}
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>

            <!-- 紧急应对指南 -->
            <div class="emergency-guide">
              <h3 class="section-title"><el-icon><BellFilled /></el-icon> 紧急应对步骤</h3>
              <div class="steps">
                <div v-for="(step, index) in emergencySteps" :key="index" class="step-item">
                  <div class="step-header">
                    <div class="step-number">步骤{{ index + 1 }}</div>
                    <h4>{{ step.title }}</h4>
                  </div>
                  <p class="step-content">{{ step.content }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧边栏 -->
      <div class="content-sidebar">
        <!-- 安全地点 -->
        <div class="sidebar-card safe-locations">
          <h3 class="card-title"><el-icon><Position /></el-icon> 附近安全点</h3>
          <div class="location-list">
            <div
              v-for="location in safeLocations"
              :key="location.id"
              class="location-item"
            >
              <div class="location-info">
                <div class="name">{{ location.name }}</div>
                <div class="address">{{ location.address }}</div>
                <div class="distance">距离约 {{ location.distance }}米</div>
              </div>
              <div class="location-actions">
                <el-button type="danger" text @click="navigateTo(location)">
                  <el-icon><MapLocation /></el-icon> 导航
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 法律知识 -->
        <div class="sidebar-card legal-knowledge">
          <h3 class="card-title"><el-icon><Notebook /></el-icon> 法律知识库</h3>
          <el-collapse v-model="activeLaws">
            <el-collapse-item
              v-for="(law, index) in laws"
              :key="index"
              :title="law.title"
              :name="index"
            >
              <div class="law-content">
                <div class="law-article" v-for="item in law.articles" :key="item.article">
                  <div class="article-header">刑法第{{ item.article }}条</div>
                  <p>{{ item.content }}</p>
                  <div class="punishment" v-if="item.punishment">
                    <el-icon><ScaleToOriginal /></el-icon> 量刑标准：{{ item.punishment }}
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>

        <!-- 安全测验 -->
        <div class="sidebar-card safety-quiz">
          <h3 class="card-title"><el-icon><QuestionFilled /></el-icon> 安全知识测验</h3>
          <div class="quiz-progress">已完成 {{ completedQuizzes }}/{{ totalQuizzes }} 题</div>
          <div class="quiz-content">
            <h4>{{ currentQuiz.question }}</h4>
            <el-radio-group v-model="quizAnswers[currentQuizIndex]">
              <el-radio
                v-for="(option, idx) in currentQuiz.options"
                :key="idx"
                :label="idx"
              >
                {{ option }}
              </el-radio>
            </el-radio-group>
            <el-button
              type="danger"
              class="next-quiz"
              @click="handleNextQuiz"
              :disabled="!quizAnswers[currentQuizIndex]"
            >
              {{ isLastQuiz ? '完成测验' : '下一题' }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import {
  Warning, InfoFilled, BellFilled, Position,
  MapLocation, Notebook, QuestionFilled, ScaleToOriginal, WarningFilled
} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";

// 播放器实例
let player: Player | null = null

// 当前视频数据
const currentVideo = reactive({
  title: '儿童防拐安全教育指南',
  date: '2024-03-15',
  duration: '12:45',
  source: 'https://vjs.zencdn.net/v/oceans.mp4',
  poster: 'https://picsum.photos/800/450?random=1'
})

// 防拐要点数据
const preventionPoints = reactive([
  {
    title: "预防诱拐",
    content: "教育孩子不轻易相信陌生人，拒绝接受陌生人的礼物和食物",
    example: "2023年南京糖果诱拐未遂案"
  },
  {
    title: "信息保护",
    content: "不在社交网络公开孩子个人信息和行程安排",
    example: "2022年杭州定位信息泄露案"
  },
  {
    title: "应急准备",
    content: "让孩子熟记家长联系方式，定期进行防拐演练",
    example: "2024年广州快速报警成功案例"
  }
])

// 紧急应对步骤
const emergencySteps = reactive([
  {
    title: "立即报警",
    content: "第一时间拨打110，提供准确时间地点和嫌疑人特征"
  },
  {
    title: "信息收集",
    content: "记录目击者信息，调取周边监控录像"
  },
  {
    title: "扩散信息",
    content: "通过公安部儿童失踪信息紧急发布平台（团圆系统）发布信息"
  }
])

// 安全地点数据
const safeLocations = reactive([
  {
    id: 1,
    name: "中山路派出所",
    address: "中山路123号",
    distance: 850,
    coordinates: "31.2304,121.4737"
  },
  {
    id: 2,
    name: "市妇幼保健院",
    address: "人民路456号",
    distance: 1200,
    coordinates: "31.2356,121.4812"
  }
])

// 法律知识数据
const activeLaws = ref<number[]>([])
const laws = reactive([
  {
    title: "刑法相关规定",
    articles: [
      {
        article: 240,
        content: "拐卖妇女、儿童的，处五年以上十年以下有期徒刑，并处罚金",
        punishment: "情节特别严重的可处死刑"
      }
    ]
  }
])

// 安全测验数据
const quizData = reactive([
  {
    question: "发现孩子失踪后应首先？",
    options: [
      "自行寻找1小时后报警",
      "立即拨打110报警",
      "联系亲朋好友帮忙"
    ],
    answer: 1
  },
  {
    question: "哪种情况需要警惕？",
    options: [
      "陌生人询问孩子信息",
      "赠送未开封的礼物",
      "以上都需要警惕"
    ],
    answer: 2
  }
])
const quizAnswers = ref<number[]>([])
const currentQuizIndex = ref(0)
const completedQuizzes = computed(() => quizAnswers.value.filter(a => a !== undefined).length)
const totalQuizzes = computed(() => quizData.length)
const currentQuiz = computed(() => quizData[currentQuizIndex.value])
const isLastQuiz = computed(() => currentQuizIndex.value === quizData.length - 1)

// 方法定义
const navigateTo = (location: any) => {
  console.log('导航至:', location.coordinates)
}

const handleNextQuiz = () => {
  if (!isLastQuiz.value) {
    currentQuizIndex.value++
  } else {
    ElMessage.success(`测验完成，正确率 ${calculateAccuracy()}%`)
  }
}

const calculateAccuracy = () => {
  const correct = quizAnswers.value.reduce((acc, cur, idx) =>
    cur === quizData[idx].answer ? acc + 1 : acc, 0)
  return ((correct / totalQuizzes.value) * 100).toFixed(1)
}

// 初始化播放器
const initPlayer = () => {
  player = new Player({
    id: 'xgplayer-container',
    url: currentVideo.source,
    poster: currentVideo.poster,
    fluid: true,
    autoplay: false
  })
}

onMounted(initPlayer)
</script>

<style lang="scss" scoped>
@use "sass:color";

$primary-red: #ff4d4f;
$secondary-red: #ffecec;

.safety-education-page {
  width: 90%;
  margin: 0 auto;
  padding: 24px;
}

.emergency-alert {
  background: $primary-red;
  color: white;
  padding: 16px 24px;
  border-radius: 8px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  font-size: 16px;
  box-shadow: 0 2px 12px rgba($primary-red, 0.3);

  .alert-icon {
    font-size: 24px;
    margin-right: 12px;
  }
}

.main-container {
  display: grid;
  grid-template-columns: 1fr 35%;
  gap: 32px;
  align-items: start;
}

.video-module {
  border: 1px solid;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  .video-container {
    height: 500px;
    border-radius: 12px 12px 0 0;
  }

  .video-info {
    padding: 24px;

    .video-title {
      font-size: 24px;
      margin-bottom: 10px;
    }

    .video-meta {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
      font-size: 14px;
    }
  }
}

.prevention-points {
  margin: 32px 0;

  .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: $primary-red;
    margin-bottom: 24px;

    .el-icon {
      font-size: 20px;
    }
  }

  .example {
    background: var(--detail-section-background);
    padding: 12px;
    border-radius: 6px;
    margin-top: 12px;
    display: flex;
    gap: 8px;
    color: color.scale($primary-red, $lightness: -10%);
    font-size: 14px;
  }
}

.emergency-guide {
  .steps {
    border-left: 3px solid $primary-red;
    padding-left: 24px;
    margin-left: 12px;

    .step-item {
      margin-bottom: 32px;
      position: relative;

      &::before {
        content: "";
        width: 12px;
        height: 12px;
        background: $primary-red;
        border-radius: 50%;
        position: absolute;
        left: -30px;
        top: 4px;
      }

      .step-header {
        display: flex;
        align-items: baseline;
        gap: 12px;
        margin-bottom: 12px;

        .step-number {
          background: $primary-red;
          color: white;
          padding: 2px 10px;
          border-radius: 4px;
          font-size: 12px;
        }
      }

      .step-content {
        line-height: 1.8;
      }
    }
  }
}

.content-sidebar {
  display: grid;
  gap: 24px;
  position: sticky;
  top: 24px;
}

.sidebar-card {
  border: 1px solid;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);

  .card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: $primary-red;
    margin-bottom: 20px;
    font-size: 18px;

    .el-icon {
      font-size: 20px;
    }
  }
}

.safe-locations {
  .location-item {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid ;

    &:last-child {
      border-bottom: none;
    }

    .location-info {
      .name {
        font-weight: 500;
        margin-bottom: 4px;
      }

      .address {
        font-size: 14px;
        margin-bottom: 4px;
      }

      .distance {
        color: $primary-red;
        font-size: 12px;
      }
    }

    .el-button {
      align-self: center;
    }
  }
}

.legal-knowledge {
  .law-article {
    padding: 12px;
    background: var(--detail-section-background);
    border-radius: 6px;
    margin-bottom: 12px;

    .article-header {
      color: $primary-red;
      font-weight: 500;
      margin-bottom: 8px;
    }

    .punishment {
      background: rgba($primary-red, 0.1);
      padding: 8px;
      border-radius: 4px;
      margin-top: 8px;
      display: flex;
      gap: 6px;
      align-items: center;
      color: color.scale($primary-red, $lightness: -10%);
    }
  }
}

.safety-quiz {
  .quiz-progress {
    font-size: 14px;
    margin-bottom: 16px;
  }

  .quiz-content {
    h4 {
      margin-bottom: 16px;
    }

    .el-radio-group {
      display: grid;
      gap: 12px;
      margin-bottom: 20px;
    }

    .next-quiz {
      width: 100%;
    }
  }
}

.warning-text {
  color: color.scale($primary-red, $lightness: -10%);
}

.danger-text {
  color: color.scale($primary-red, $lightness: -10%);
}

@media (max-width: 768px) {
  .main-container {
    grid-template-columns: 1fr;
  }

  .video-container {
    height: 300px !important;
  }

  .content-sidebar {
    position: static;
  }
}
</style>
